<template>
  <div class="myorder">
    <Head title="我的微店"/>
    <div class="container">
      <!-- 顶部导航 -->
      <div class="order_nav">
        <div
          :class="inds==0?'order_nav_list order_nav_list_act':'order_nav_list'"
          @click="setNav(0)"
        >
          <div class="order_nav_list_box">
            <div class="order_nav_list_box_top">{{order_statistical_data.ongoing_order}}</div>
            <div class="order_nav_list_box_bot">进行中</div>
          </div>
        </div>
        <div
          class="order_nav_list"
          :class="inds==1?'order_nav_list order_nav_list_act':'order_nav_list'"
          @click="setNav(1)"
        >
          <div class="order_nav_list_box">
            <div class="order_nav_list_box_top">{{order_statistical_data.completed_order}}</div>
            <div class="order_nav_list_box_bot">已完成</div>
          </div>
        </div>
        <div
          class="order_nav_list"
          :class="inds==2?'order_nav_list order_nav_list_act':'order_nav_list'"
          @click="setNav(2)"
        >
          <div class="order_nav_list_box">
            <div class="order_nav_list_box_top">{{order_statistical_data.cancle_order}}</div>
            <div class="order_nav_list_box_bot">已关闭</div>
          </div>
        </div>
      </div>
      <!-- 顶部导航 end -->
      <!-- 二级导航 -->
      <div class="nav_list" v-if="inds==0">
        <div
          :class="ind==index?'nav_list_list nav_list_list_act':'nav_list_list'"
          v-for="(item,index) in navList1"
          @click="setInd(index)"
        >
          <div class="nav_list_list_box">{{item}}</div>
        </div>
        <!-- 底部边框 -->
        <div class="red_border"></div>
      </div>

      <div class="nav_list" v-else-if="inds==2">
        <div
          :class="ind==index?'nav_list_list nav_list_list_act':'nav_list_list'"
          v-for="(item,index) in navList2"
          @click="setInd(index)"
        >
          <div class="nav_list_list_box">{{item}}</div>
        </div>
        <!-- 底部边框 -->
        <div class="red_border"></div>
      </div>
      <!-- 二级导航 end -->
      <div :class="inds==1?'order_list_1':'order_list_'">
        <van-list @load="onLoad">
          <OrderList :dataList="order_list" :orderStatu="{inds:inds,ind:ind}" @order_delete_post="order_delete_post"/>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
import OrderList from "./order_list";
export default {
  data() {
    return {
      inds: 0, //顶部导航索引
      navList1: ["全部", "待付款", "待发货", "待收货", "待退款"],
      navList2: ["全部", "已退款", "已取消"],
      ind: 0, //二级导航索引
      page: 1,
      numm: 0,
      offon: true,
      order_list: [],
      order_statistical_data:{}
    };
  },
  mounted() {
    this.getCount()
    this.getOrderList();
  },
  methods: {
    // 初始化
    init() {
      this.page = 1;
      this.offon = true;
      this.getOrderList();
    },
    // 删除订单
    order_delete_post(index){
      this.order_list.splice(index,1)
      this.getCount()
    },
    // 获取统计
    getCount(){
      this.appJS.ajax(
        "user.get_order_statistical_data",
        "post",
        {
          store_id: this.appJS.getStorage('store_info').store_id
        },
        res => {
          if (res.recode == 1) {
            this.order_statistical_data = res.data.info
          }
        }
      );
    },
    // 加载更多
    onLoad() {
      if (this.numm == 0) {
        this.numm += 1;
      } else {
        if (this.offon) {
          this.offon = false;
          this.page += 1;
          this.getOrderList();
        }
      }
    },
    // 获取列表
    getOrderList() {
      let order_state_id = [];
      if (this.inds == 0) {
        switch (this.ind) {
          case 0:
            order_state_id = [1, 2, 3, 4, 9];
            break;
          case 1:
            order_state_id = [1];
            break;
          case 2:
            order_state_id = [3];
            break;
          case 3:
            order_state_id = [4];
            break;
          case 4:
            order_state_id = [9];
            break;
        }
      } else if (this.inds == 1) {
        //已完成
        order_state_id = [7];
      } else {
        switch (this.ind) {
          case 0:
            order_state_id = [10, 8];
            break;
          case 1:
            order_state_id = [10];
            break;
          case 2:
            order_state_id = [8];
            break;
        }
      }
      this.appJS.ajax(
        "user.get_order_list",
        "post",
        {
          order_state_id: order_state_id.join(","),
          page: this.page
        },
        res => {
          if (res.recode == 1) {
            if (this.page == 1) {
              this.order_list = res.data.order_list;
            } else {
              if (res.data.order_list.length == 0) {
                this.$toast("没有更多数据...");
              } else {
                this.order_list = this.order_list.concat(res.data.order_list);
                this.offon = true;
              }
            }
          }
        },this
      );
    },
    // 选择顶部导航
    setNav(index) {
      this.inds = index;
      this.ind = 0;
      if (index == 2) {
        //进行中的初始化
        this.$nextTick(() => {
          document.getElementsByClassName("red_border")[0].style.left = "25vw";
        });
      } else if (index == 0) {
        if (document.getElementsByClassName("red_border")[0]) {
          document.getElementsByClassName("red_border")[0].style.left = "5vw";
        }
      }
      this.init();
    },
    // 设置二级索引
    setInd(index) {
      this.ind = index;
      if (this.inds == 0) {
        document.getElementsByClassName("red_border")[0].style.left =
          20 * index + 5 + "vw";
      } else if (this.inds == 2) {
        //设置进行中的下标位置
        document.getElementsByClassName("red_border")[0].style.left =
          20 * index + 25 + "vw";
      }
      this.init();
    }
  },
  components: {
    Head,
    OrderList
  }
};
</script>

<style scoped lang='less'>
@co: rgb(236, 79, 70);
.myorder {
  .order_nav {
    height: 20vw;
    width: 100%;
    background: @color;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .order_nav_list {
      color: #fff;
      height: 100%;
      width: 33.3333%;
      display: flex;
      justify-content: center;
      align-items: center;
      .order_nav_list_box {
        width: 20vw;
        .order_nav_list_box_top {
          font-size: 0.9rem;
          text-align: center;
        }
        .order_nav_list_box_bot {
          font-size: 0.9rem;
          text-align: center;
          margin-top: 0.2rem;
        }
      }
    }
    .order_nav_list_act {
      color: @co;
    }
  }
  .nav_list {
    height: 2.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #efefef;
    .red_border {
      position: absolute;
      height: 6px;
      width: 10vw;
      background: @co;
      border-radius: 100px;
      bottom: 0;
      left: 5vw;
      transition: 0.4s;
    }
    .nav_list_list {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .nav_list_list_box {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 0.8rem;
      }
    }
    .nav_list_list_act {
      color: @co;
    }
  }
  .order_list_ {
    height: calc(100vh - 20vw - 2.5rem - 60px);
    overflow: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .order_list_1 {
    height: calc(100vh - 20vw - 60px);
    overflow: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}
</style>
